<template>
  <div class="song_detail">
    <div class="song_detail_top">
      <!-- 歌单封面 -->
      <img class="songImage" :src="playlist.coverImgUrl" alt="" />
      <!-- 歌单右边的简介 -->
      <div class="introduce_right">
        <!-- 从上到下---歌单名字,创建歌单的网友,歌单操作,简介 -->
        <div class="songName">
          <div>
            <span class="songName_songForm">歌单</span>
            <span class="songName_name">{{ playlist.name }}</span>
          </div>
          <div class="songName_count">
            歌曲数:{{ allSongs }}
            <br />
            播放数:{{ handle_playConunt(playlist.playCount) }}
            <!-- this.$bus.$emit('handle_playConunt',this.playlist.playCount) -->
          </div>
        </div>

        <div class="createPeople">
          <!-- playlist.creator?playlist.creator.avatarUrl:'' -->
          <img :src="creator.avatarUrl" alt="" />
          <span class="createPeople_name">{{ creator.nickname }}</span>
          <span class="createPeople_time">{{
            `${createTime.year}-${createTime.month}-${createTime.day}创建`
          }}</span>
        </div>

        <div class="handle">
          <el-button type="danger" icon="el-icon-video-play"
          @click="$bus.$emit('playAllSongs',1)"
            >播放全部</el-button
          >
          <el-button icon="el-icon-folder-add"
            >收藏({{ playlist.subscribedCount }})</el-button
          >
          <el-button icon="el-icon-share"
            >分享({{ playlist.shareCount }})</el-button
          >
          <el-button icon="el-icon-download">下载全部</el-button>
        </div>

        <div class="saySomething">
          <p>
            标签:
            <span
              class="saySomething_tags"
              v-for="(item, index) in playlist.tags"
              :key="index"
              >{{ item }}</span
            >
          </p>
          <p>
            简介: <span>{{ creator.signature }}</span>
          </p>
        </div>
      </div>
    </div>

    <div class="songsForm_top">
      <div class="songsForm_top_left">
        <span @click="songPlay" class="songsForm_top_left_active"
          >歌曲列表</span
        >
        <span @click="comments">评论({{ playlist.commentCount }})</span>
        <span @click="collectors">收藏者</span>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    songId() {
      return this.$route.query.id;
    },
    ...mapState(["playlist"]),
    // 计算歌单歌曲的数量
    allSongs() {
      return this.playlist.tracks ? this.playlist.tracks.length : 0;
    },
    // 创建歌单的信息
    creator() {
      return this.playlist.creator || "";
    },

    // 用户创建歌单时间
    createTime() {
      const time = this.playlist.createTime;
      const year = new Date(time).getFullYear();
      const month = new Date(time).getMonth() + 1;
      const day = new Date(time).getDate();
      return { year, month, day };
    },
  },
  methods: {
    //向vuex派发歌单详情请求
    ajaxSongDetail() {
      // console.log(this.songId)
      this.$store.dispatch("getSongFormDetail", this.songId);
    },
    // 向vuex派发歌单中歌曲请求
    ajaxSongs() {
      this.$store.dispatch("getFongsFromForm", this.songId);
    },
    // 播放数量单位换算为 万
    handle_playConunt(value) {
      if (value > 10000) return parseInt(value / 10000) + "万";
      else return value;
    },

    // 底部切换到歌曲列表
    songPlay() {
      this.$router.push(`/songDetail/songList?id=${this.songId}`);
    },
    // 切换到评论
    comments() {
      this.$router.push(`/songDetail/comments?id=${this.songId}`);
    },
    // 切换到收藏者
    collectors() {
      this.$router.push(`/songDetail/collectors?id=${this.songId}`);
    },
  },
  mounted() {
    this.ajaxSongDetail();
    this.ajaxSongs();
  },
};
</script>

<style scoped lang="less">
.song_detail {
  width: 100%;
  .song_detail_top {
    width: 100%;
    height: 300px;
    overflow: hidden;
    display: flex;
    .songImage {
      background-color: rgba(0, 0, 0, 0.5);
      padding: 10px;
      width: 25%;
    }
    .introduce_right {
      //   background-color: orange;
      width: 70%;
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      //   歌单名字
      .songName {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 10px;
        .songName_songForm {
          color: red;
          //   display: inline-block;
          border: 1px red solid;
          margin-right: 10px;
        }
        .songName_name {
          font-weight: 900;
          font-size: 20px;
          color: #333333;
        }
      }

      //   创建歌单用户信息
      .createPeople {
        margin: 10px;
        display: flex;
        align-items: center;
        img {
          width: 50px;
          border-radius: 50%;
          margin: 0 10px;
        }
        .createPeople_name {
          font-size: 23px;
          color: #666666;
        }
        .createPeople_time {
          color: #888888;
          margin: 0 10px;
        }
      }

      //   操作歌单
      .handle {
        .el-button {
          margin: 10px;
          box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
        }
      }

      //   标签和简介
      .saySomething {
        margin: 10px;
        .saySomething_tags {
          cursor: pointer;
          color: #0c73c2;
        }
        span {
          margin-left: 5px;
        }
      }
    }
  }
}

.songsForm_top {
  margin: 5px;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .songsForm_top_left {
    width: 40%;
    display: flex;
    justify-content: space-around;
    span {
      cursor: pointer;
    }
  }
  .songsForm_top_right {
    display: flex;
    width: 30%;
  }
}
</style>>
